<template>
  <div class="top">
    <div class="menu1">
      <div class="One">
        <h2 class="oh1">验证码登录界面</h2>
      </div>
      <div class="Two">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="16vw"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名称 :" prop="userphone">
            <i class="el-icon-user-solid i"></i>
            <el-input
              placeholder="请输入您的手机号"
              v-model="ruleForm.userphone"
              autocomplete="off"
              @keydown.native="keydown($event)"
            ></el-input>
          </el-form-item>
          <el-button v-show="show1" class="btnmessage" @click="change"
            >获取验证码</el-button
          >
          <el-button
            @click="change2"
            disabled
            v-show="!show1"
            class="btnmessage change2"
            >{{ n }}秒后重新获取</el-button
          >
          <el-form-item label="验 证 码 :" prop="code">
            <i class="el-icon-s-promotion i"></i>
            <el-input
              placeholder="请输入验证码"
              @keydown.native="keydown($event)"
              v-model.number="ruleForm.code"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              style="display: block"
              class="bt1"
              type="primary"
              @click="submitForm('ruleForm')"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { message,getCode } from "@/api";
export default {
  data() {
    let re = /^[1][3,4,5,7,8][0-9]{9}$/;
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else if (re.test(value)) {
        callback();
      } else {
        return callback(new Error("请输入正确的手机号"));
      }
    };
    // 校验密码：只能输入4个数字
    let re2 = /^([0-9]{4})$/;
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("验证码不能为空"));
      } else if (re2.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的验证码"));
      }
    };

    return {
      ruleForm: {
        userphone: "",
        code: "",
      },
      rules: {
        userphone: [{ validator: checkUsername, trigger: "blur" }],
        code: [{ validator: validatePass, trigger: "blur" }],
      },
      drawer: false,
      show: true,
      show1: true,
      n: 60,
      check: false,
      time: function () {},
    };
  },
  watch: {
    n() {},
  },
  methods: {
    change2() {
      this.$message({
        message: "请勿重复获取",
        type: "error",
      });
    },
    change() {
      let re = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (re.test(this.ruleForm.userphone)) {
        let user = this.ruleForm.userphone;
        getCode({ userphone: user }).then((res) => {
          // if (res.data.ststus !== 0) {
          this.check = true;
          this.show1 = false;
          this.time = setInterval(() => {
            this.n--;

            if (this.n == 0) {
              clearInterval(this.time);
              this.show1 = true;
              this.n = 60;
            }
          }, 1000);
          this.$message({
            message: "验证码已发送",
            type: "success",
          });
          // }
          // else {
          //   this.$message({
          //     message: "用户未注册",
          //     type: "error",
          //   });
          // }
        });
      } else {
        this.$message({
          message: "请先输入正确手机号",
          type: "error",
        });
      }
    },
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false;
      }
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (this.ruleForm.userphone === "") {
          this.$message({
            message: "请先输入手机号",
            type: "error",
          });
        } else if (this.check === false) {
          this.$message({
            message: "请先获取验证码",
            type: "error",
          });
          // return false;
        } else {
          if (valid) {
            console.log(this.ruleForm, "sfjjslfjj ");
            // let data = {
            //   userphone: this.ruleForm.username,
            //   code: this.ruleForm.password
            // }
            // message(data).then(res=>{
            //   console.log(res,'res');
            // })
            // this.$message({
            //   message: "登陆成功",
            //   type: "success",
            // });
            // this.ruleForm = {};
            this.$store.dispatch("login2", this.ruleForm);
          } else {
            this.$message({
              message: "登录信息错误",
              type: "error",
            });
            // -------------------------------------
            this.ruleForm = {};
            // clearInterval(this.time);
            // this.n = 60;
            // this.show1 = true;
            return false;
          }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //  第二个
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>


<style scoped>
.top >>> .el-input__inner {
  font-size: 30px;
}
.top >>> .el-button > span {
  font-size: 30px;
}
.change2 {
  font-size: 30px;
  color: #ccc;
}
.btnmessage {
  font-size: 30px;
  width: 30vw;
  border-radius: 60vw;
  height: 5vh;
  margin-top: -10vh;
  margin-bottom: 3vh;
  margin-left: 16vw;
}
.el-icon-phone {
  font-size: 30px;
  color: cyan;
}
.el-icon-s-custom {
  font-size: 30px;
  color: rgb(0, 0, 0);
}
.el-icon-plus {
  font-size: 30px;
  color: orange;
}
@keyframes ff {
  0% {
    opacity: 0;
    left: -10vw;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
.box1 {
  animation: ff 0.5s forwards;
  position: absolute;
  top: 8vh;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  border-radius: 10px;
  font-size: 30px;
  width: 45vw;
  justify-content: space-around;
  display: flex;
  /* border: 1px solid red; */
}
.box1 > section > i {
  display: block;
  font-size: 60px;
  text-align: center;
}
.bt2 {
  width: 18vw;
  text-align: center;
  padding: 1vh 3vw;
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.4);
  border: 0.1vw solid #fff;
  bottom: -8vh;
  left: 46vw;
  position: absolute;
  font-size: 30px;
  color: rgb(206, 255, 199);
}
.footer {
  position: absolute;
  top: 0;
  font-size: 30px;
  left: 0;
}
.back {
  position: absolute;
  left: 0;
  font-size: 30px;
  bottom: 0;
}
.top {
  width: 100vw;
  height: 100vh;
  background: url("../../../assets/4.jpg");
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  font-size: 30px;
  overflow: hidden;
}
.oh1 {
  letter-spacing: 2vw;
  margin: 30vh 0 5vh 0;
  text-align: center;
  font-size: 40px;
  color: #b76bff;
}
/* ---------- */
.top >>> .el-message {
  duration: 0;
  width: 40vw;
  padding: 10px;
  font-size: 60px;
}
.top >>> .el-form-item--feedback {
  font-size: 30px;
  animation: none;
}
.top >>> .el-form-item {
  /* left:1vw; */
  font-size: 30px;
  position: relative;
}
.top >>> .i {
  position: absolute;
  left: 2vw;
  z-index: 1000;
  top: 1.2vh;
  font-size: 40px;
}
.top >>> .el-form-item__label {
  position: absolute;
  left: 22vw;
  top: 1.2vh;
  z-index: 100;
  font-size: 30px;
  margin-right: 1vw;
}
.top >>> .el-input {
  margin-bottom: 3vh;
  font-size: 30px;
  border-radius: 20px;
  width: 70vw;
}
.top >>> .el-input__inner {
  text-indent: 22vw;
  font-size: 30px;
  border-radius: 50px;
  height: 5vh;
  line-height: 5vh;
}
.top >>> .el-input__suffix {
  top: 1.4vh;
  right: 6vw;
  font-size: 30px;
}
.top >>> .el-form-item__error {
  top: 68%;
  color: rgb(255, 61, 61);
  left: 23vw;
  font-size: 30px;
}
.top >>> .bt1 {
  width: 70vw;
  border-radius: 30px;
  font-size: 30px;
  height: 5vh;
  border-radius: 60px;
  border: none;
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
</style>
